Skip to content

DX-1128: localise interactive components (SegmentedControl, TabMenu)#3413

Merged
jamiehenson merged 2 commits into
mainfrom
dx-1128/docs-components-interactive
Jun 26, 2026
Merged

DX-1128: localise interactive components (SegmentedControl, TabMenu)#3413
jamiehenson merged 2 commits into
mainfrom
dx-1128/docs-components-interactive

Conversation

@jamiehenson

@jamiehenson jamiehenson commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Part of DX-1128. Localises the interactive components.

What

src/components/ui/SegmentedControl.tsx + TabMenu.tsx, vendored and rewired to local Icon/cn (es-toolkit direct dep). SegmentedControl's leftIcon/rightIcon props now take a ReactNode (a Heroicon or Ably <Icon> glyph passed directly, sized by the control).

Behaviour

No visual change intended.

Stack (DX-1128)

PR Role
#3409 Design foundation — vendor @ably/ui tokens + reset/core CSS (merged)
#3410 Local cn + heights utils
#3411 Docs-native Icon component (Ably glyphs only; Heroicons imported directly)
#3412 Presentational components (Badge, Button, LinkButton, FeaturedLink, Status)
▶ #3413 Interactive components (SegmentedControl, TabMenu)
#3414 ProductTile + product data (leaf)
#3415 syntax-highlighter util + registry
#3416 Code + CodeSnippet — completes the lift; prunes dead CSS + drops @ably/ui Tailwind scan

#3410–#3416 are a linear stack, each building on the previous; #3409 has merged to main. ▶ = this PR.

Testing

  • Load the review app.
  • Check a sufficient sample of pages load with no visual regressions.

🤖 Generated with Claude Code

@coderabbitai

coderabbitai Bot commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 46eda2b0-385d-40a2-9685-6daee1b43dcf

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch dx-1128/docs-components-interactive

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

This was referenced Jun 17, 2026
Open
Open
Closed
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from ef72e03 to 02d982a Compare June 18, 2026 13:18
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-interactive branch from c57d361 to eb5a063 Compare June 18, 2026 13:18
@jamiehenson jamiehenson marked this pull request as ready for review June 18, 2026 13:36
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from 02d982a to a74f1b6 Compare June 18, 2026 14:34
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-interactive branch from eb5a063 to 6f2cac7 Compare June 18, 2026 14:34
@jamiehenson jamiehenson added the review-app Create a Heroku review app label Jun 18, 2026
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--xbqjvz June 18, 2026 14:54 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from a74f1b6 to e801746 Compare June 18, 2026 14:57
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-interactive branch from 6f2cac7 to e11ceaf Compare June 18, 2026 14:57
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--xbqjvz June 18, 2026 14:57 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from e801746 to cee3a61 Compare June 18, 2026 15:50
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-interactive branch from e11ceaf to f7308b7 Compare June 18, 2026 15:50
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--xbqjvz June 18, 2026 15:50 Inactive
@jamiehenson jamiehenson marked this pull request as draft June 18, 2026 16:25
This was referenced Jun 18, 2026
Merged
Merged
Merged
Merged
Open
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from cee3a61 to 88c9b9f Compare June 23, 2026 13:25
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-interactive branch from f7308b7 to b7b6074 Compare June 23, 2026 13:25
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--xbqjvz June 23, 2026 13:26 Inactive
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--xbqjvz June 23, 2026 14:11 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-interactive branch from b7b6074 to 622c4dd Compare June 23, 2026 16:51
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from 88c9b9f to 32bc1f7 Compare June 23, 2026 16:51
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--xbqjvz June 23, 2026 16:51 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-interactive branch from 622c4dd to 8c73370 Compare June 23, 2026 17:15
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from 32bc1f7 to 2f29be3 Compare June 23, 2026 17:15
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--xbqjvz June 23, 2026 17:15 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from 2f29be3 to d9f00ba Compare June 24, 2026 08:38
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-interactive branch from 8c73370 to 486571c Compare June 24, 2026 08:38
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--xbqjvz June 24, 2026 08:38 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from d9f00ba to 9d02706 Compare June 25, 2026 07:33
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-interactive branch from 486571c to 94e7bcb Compare June 25, 2026 07:33
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--xbqjvz June 25, 2026 07:34 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-interactive branch from 94e7bcb to bb75ac0 Compare June 25, 2026 13:54
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from 9d02706 to fa0d218 Compare June 25, 2026 13:54
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--xbqjvz June 25, 2026 13:54 Inactive
Base automatically changed from dx-1128/docs-components-presentational to main June 25, 2026 14:20
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-interactive branch from bb75ac0 to 0e10dee Compare June 25, 2026 14:22
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--xbqjvz June 25, 2026 14:23 Inactive
@jamiehenson
refactor(docs): localise interactive components (SegmentedControl, Ta…
72f8545 
…bMenu) (DX-1128)

Vendor SegmentedControl and TabMenu locally, off @ably/ui/core. SegmentedControl's
leftIcon/rightIcon props now take a ReactNode (Heroicon or Ably glyph passed
directly, sized by the control) rather than an icon-name string, matching the
glyphs-only local Icon and the rest of the localised components.
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-interactive branch from 0e10dee to 72f8545 Compare June 25, 2026 14:38
@jamiehenson jamiehenson marked this pull request as ready for review June 25, 2026 14:41
@jamiehenson

jamiehenson commented Jun 25, 2026

Copy link
Copy Markdown
Member Author

Where these components are used (review aid):

  • TabMenu → src/components/Layout/Header.tsx — the mobile burger-menu tabs (Platform / Products / Examples).
  • SegmentedControl → src/components/Examples/ExamplesRenderer.tsx — the example-page language switcher (the icon-tech-* leftIcon, exercising the new ReactNode / IconSlot path).

Both have a live consumer at this PR's merge point. Two more SegmentedControl consumers (the CodeSnippet SDK-type switch + TooltipButton) arrive in #3416.

~ 𝒞𝓁𝒶𝓊𝒹𝑒

kennethkalmer
kennethkalmer approved these changes Jun 25, 2026
View reviewed changes

@kennethkalmer kennethkalmer left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed against the @ably/ui source — faithful vendoring, diffs are entirely prettier/quote + import rewire, no logic drift.

  • SegmentedControl: leftIcon/rightIcon → ReactNode, rendered via IconSlot with iconColor = contentColorStyles[variant][activeKey] (same value the old <Icon color> got) and sizes preserved (md 23px / sm 22px / xs 20px).
  • TabMenu: ReactNode content, no Icon usage — pure formatting/cn rewire.
  • es-toolkit promoted to a direct dep for TabMenu's throttle; Header delta is just the TabMenu import swap.

Also closes out both notes from #3412: the ExamplesRenderer leftIcon string is now wrapped in <Icon> (no more literal-text footgun), and IconSlot extracts the shared sizing slot (consumed here by SegmentedControl).

Approving.

~ 𝒢𝓁𝒶𝓊𝒹𝑒

@jamiehenson jamiehenson enabled auto-merge June 26, 2026 08:03
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--xbqjvz June 26, 2026 08:03 Inactive
@jamiehenson jamiehenson merged commit 2611889 into main Jun 26, 2026
7 checks passed
@jamiehenson jamiehenson deleted the dx-1128/docs-components-interactive branch June 26, 2026 08:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kennethkalmer kennethkalmer kennethkalmer approved these changes

Assignees

No one assigned

Labels

review-app Create a Heroku review app

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@jamiehenson @kennethkalmer @ably-ci